<script setup lang="ts">
definePage({
  name: 'laboratory',
  style: {
    navigationBarTitleText: '实验室',
  },
})

const router = useRouter()

function navigateTo(name: string) {
  router.push({
    name,
  })
}

function openUrl(url: string) {
  window.open(url, '_blank')
}
</script>

<template>
  <view class="page-container">
    <demo-block title="工具链介绍" transparent>
      <wd-cell-group border custom-class="cell-group">
        <wd-cell title="🧩 WotUI组件库" is-link @click="openUrl('https://wot-ui.cn/demo/')" />
        <wd-cell title="🚦 Router 路由管理" is-link @click="navigateTo('router')" />
        <wd-cell title="🌐 Alova 网络请求" is-link @click="navigateTo('request')" />
        <wd-cell title="🎨 Icon 图标" is-link @click="navigateTo('icon')" />
        <wd-cell title="🍍 Pinia 持久化" is-link @click="navigateTo('pinia')" />
        <wd-cell title="💬 Fedback 反馈组件" is-link @click="navigateTo('feedback')" />
        <wd-cell title="📊 Echart 图表" is-link @click="navigateTo('echarts')" />
      </wd-cell-group>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-container {
  box-sizing: border-box;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

:deep(.cell-group) {
  border-radius: 0.5rem !important;
  overflow: hidden;
}
</style>
